<template>
  <div>
    <strong>Security Admin 管理系统</strong>
    <div class="header-avatar">
      <!-- 用户头像-->
      <el-avatar :src="userInfo.avatar" :size="30"></el-avatar>

      <!-- 下拉菜单-->
      <el-dropdown>
        <span class="el-dropdown-link"> {{ userInfo.username }}<i class="el-icon-arrow-down el-icon--right"></i> </span>

        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>
            <router-link to="/home/user"> 个人中心</router-link>
          </el-dropdown-item>
          <!-- @click.native 原生点击事件 -->
          <el-dropdown-item @click.native="logout">退出</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>

      <!-- 外部链接-->
      <el-link href="https://element.eleme.cn/#/zh-CN" target="_blank">官网</el-link>
      <el-link href="https://www.baidu.com" target="_blank">百度</el-link>
    </div>
  </div>
</template>

<script>
// import mockjs from '@/mock'

export default {
  name: 'Common-Hearder',
  data() {
    return {
      userInfo: {
        id: '',
        username: 'frank',
        avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
      },
    }
  },
  created() {
    this.getUserInfo()
  },
  methods: {
    /**
     * 获取用户信息
     */
    getUserInfo() {
      this.$axios.get('/sys/user/info/1').then((res) => {
        this.userInfo = res.data.data
      })
    },
    /**
     * 退出操作
     */
    logout() {
      this.$axios.post('/logout').then((res) => {
        // console.log(res.data.data)
        localStorage.clear()
        sessionStorage.clear()
        this.$store.commit('resetState')
        this.$router.push('/login')
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.header-avatar {
  float: right;
  width: 210px;
  display: flex;
  justify-content: space-around;
  align-items: center;

  .el-dropdown-link {
    cursor: pointer;
  }
}
</style>
